<template>
  <div class="pay">
    <!-- 用户简介 -->

<Adress v-if="flag>1" @gift="cancle">

</Adress>



    <div class="payuser">
      <div class="payuse">
        
        <p>
          <span>代用名：</span>
          <span>{{username}}</span>
        </p>
        <p @click="xian">{{add}}</p>
      </div>
    </div>
    <!-- 一个间隔 -->
    <div class="kong"></div>
    <!-- 品牌精选 -->
    <div class="allc">
      <div class="cllc1">
        <img src="../assets/image/icon/index/kingkong/selfsupport.png" alt="" />
        <span>品牌精选</span>
      </div>
      <div class="cllc2">
        <span>已免运费</span>
        <span>|</span>
        <span>领券</span>
      </div>
    </div>
    <!-- 列表购物车 -->
    <ul class="payul">
      <li v-for="(item, i) in paylist" :key="i">
        <img :src="item.img" alt="" />
        <div class="payp">
          <!--  -->
          <span class="payp0">{{ item.goodsname }}</span>
          <!--  -->
          <div class="paypa">
            <p>
              <span>￥</span>
              <span>{{item.price}}</span>
            </p>
            <span>×{{ item.num }}</span>
          </div>
          <!--  -->
          <div class="paypb">
            <p>7天无理由退货</p>
            <p>特价</p>
          </div>
        </div>
      </li>
    </ul>
    <!-- 售后发票留言列表 -->
    <ul class="note">
      <li>
        <p>
          <span>发票类型</span>
          <span style="color: #333333">不开发票></span>
        </p>
      </li>
      <li>
        <p>
          <span>售后免邮</span>
          <span>部分商家赠送</span>
        </p>
      </li>
      <li>
        <p>
          <span>买家留言</span>
          <input
            style="color: #333333"
            type="text"
            placeholder="填写内容需要与商家协商并确认，45字以内"
          />
        </p>
      </li>
    </ul>
    
    <!-- 一个间隔 -->
    <div class="kong"></div>
    <!-- 售后发票留言列表 -->
    <ul class="note">
      <li>
        <p>
          <span>商品金额</span>
          <span style="color: #333333">￥1998</span>
        </p>
      </li>
      <li>
        <p>
          <span>优惠活动</span>
          <span style="color: red">-￥200</span>
        </p>
      </li>
      <li>
        <van-coupon-cell class="you" @click="showList = true" />
      </li>
    </ul>
    <!-- 支付 -->

    <van-submit-bar v-if="flag2>0" :price="this.allprice" button-text="提交订单" >
    </van-submit-bar>
 

  </div>
</template>
<script>
import { getCartlist,getAddresslist } from "../util/request/api";
import "../assets/css/pay.css";
import Adress from './adress.vue'

export default {
  components: { Adress },
  data() {
    return {
      flag:1,
      flag2:1,
      paylist: [
        {
          id: 1,
          url: require("../assets/image/pic/commodity/01.png"),
          num: 1,
          title: "溪牧原山茶花洁面泡沫 氨基酸洗面奶200ML 浸透舒缓",
        },
        {
          id: 2,
          url: require("../assets/image/pic/commodity/02.png"),
          num: 2,
          title: "溪牧原山茶花洁面泡沫 氨基酸洗面奶150ML 浸透舒缓",
        },
        {
          id: 3,
          url: require("../assets/image/pic/commodity/03.png"),
          num: 3,
          title: "溪牧原山茶花洁面泡沫 氨基酸洗面奶100ML 浸透舒缓",
        },
        {
          id: 4,
          url: require("../assets/image/pic/commodity/04.png"),
          num: 4,
          title: "溪牧原山茶花洁面泡沫 氨基酸洗面奶200ML 浸透舒缓",
        },
        {
          id: 5,
          url: require("../assets/image/pic/commodity/05.png"),
          num: 2,
          title: "溪牧原山茶花洁面泡沫 氨基酸洗面奶205ML 浸透舒缓",
        },
      ],
      allprice:0,
      username:'爆破南墙',
      phone:13153310386,
      add:'北京 北京市 昌平区 朱辛庄中公教育实训基地IT教学楼 2号楼 2202室',
      // 
    

    };
  },
  methods: {

    // 
    xian(){
      this.flag=2
      this.flag2=0
    },
    // 关闭弹窗事件
    cancle(e){
      console.log(e,'eeeeee');
      this.username= e.name
      this.phone=  e.phone
      this.add= e.add
      this.flag=1
      this.flag2=1
    }
  },

  mounted() {
    // 获取uid
    let obj = JSON.parse(sessionStorage.getItem("isLogin"));
    let uid = obj.uid;

    // 获取authorization
    let authorization = sessionStorage.getItem("isLogin")
      ? JSON.parse(sessionStorage.getItem("isLogin")).token
      : "";
    let a = {
      uid,
      authorization,
    };
    console.log(a, "a");
    // 请求购物车
    getCartlist(a).then((res) => {
      console.log(res, "cart.vue");
      if (res.code == 200) {
        this.paylist = res.list;
        console.log(res);
        let sum = 0;
        this.paylist.map((item) => {
          sum += item.num * item.price;
          console.log(sum,'sum');
          this.allprice= sum*100
        });
      }
    });
    let b = {
      uid,
      status:0
    };
    // 地址接口
    getAddresslist(b)
    .then((res)=>{
      if (res.code==200) {
          console.log(res,'地址调取成功');
      }
    })
  },
};
</script>
<style scoped>
</style>